<template>
  <div class="mod-config">
    <el-form :inline="true">
      <el-form-item>
        <date-phase ref="datePhase" dateTypeRange="0234" :datePhase="datePhase" ></date-phase>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getReport()" :loading="dataListLoading">查询</el-button>
        <el-button v-if="(!editMode) && (getCanEdit())" @click="edit()">编辑</el-button>
        <el-button v-if="editMode && (getCanEdit())" :loading="saveLoading" @click="save()">保存</el-button>
        <el-button type="primary" @click="exportExcel">导出</el-button>
      </el-form-item>
    </el-form>
    <div  id="sale-table">
    <div v-for="dt in reportItems" >
      <!-- <div style="background-color: #F5F7FA; clear:both;padding: 15px; width:600px;">
        {{dt.dateDescription}}
        ACOS%：{{dt.tag}}
      </div> -->
      <el-table :data="getSmData(dt.value)" style="width: 100%;">
        <el-table-column label="社交类" align="center">
          <el-table-column
            prop="datePhase"
            label="时间"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="plat"
            label="平台"
            min-width="118">
          </el-table-column>
          <el-table-column
            prop="saleValue"
            label="业绩$"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="2" :controls="false" v-if="editMode" v-model="scope.row.saleValue" />
              <span v-if="!editMode">{{scope.row.saleValue}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="newFans"
            label="新增粉丝"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="0" :controls="false" v-if="editMode" v-model="scope.row.newFans" />
              <span v-if="!editMode">{{scope.row.newFans}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="queryNum"
            label="询盘量"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="0" :controls="false" v-if="editMode" v-model="scope.row.queryNum" />
              <span v-if="!editMode">{{scope.row.queryNum}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="cost"
            label="花费$"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="2" :controls="false" v-if="editMode" v-model="scope.row.cost" />
              <span v-if="!editMode">{{scope.row.cost}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="costPerFans"
            label="粉丝成本"
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="cpf"
            label="CPF"
            min-width="80">
          </el-table-column>
        </el-table-column>
      </el-table>
      <el-table style="width: 100%;margin-top:20px;"
                :data="getFeedsData(dt.value)">
        <el-table-column label="FEEDS类" align="center">
          <el-table-column
            prop="datePhase"
            label="时间"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="plat"
            label="平台"
            min-width="118">
          </el-table-column>
          <el-table-column
            prop="saleValue"
            label="业绩$"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="2" :controls="false" v-if="editMode" v-model="scope.row.saleValue" />
              <span v-if="!editMode">{{scope.row.saleValue}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="articleNum"
            label="发帖数"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="0" :controls="false" v-if="editMode" v-model="scope.row.articleNum" />
              <span v-if="!editMode">{{scope.row.articleNum}}</span>
            </template>
          </el-table-column>
          <template slot-scope="scope">
            <el-input-number size="mini" class="edit-cell" :precision="0" :controls="false" v-if="editMode" v-model="scope.row.articleNum" />
            <span v-if="!editMode">{{scope.row.articleNum}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table style="width: 100%;margin-top:20px;" :data="getVideoData(dt.value)">
        <el-table-column label="视频类" align="center">
          <el-table-column
            prop="datePhase"
            label="时间"
            min-width="150">
          </el-table-column>
          <el-table-column
            prop="plat"
            label="平台"
            min-width="118">
          </el-table-column>
          <!-- <el-table-column
            prop="saleValue"
            label="业绩$"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="2" :controls="false" v-if="editMode" v-model="scope.row.saleValue" />
              <span v-if="!editMode">{{scope.row.saleValue}}</span>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="videoNum"
            label="视频数"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="0" :controls="false" v-if="editMode" v-model="scope.row.videoNum" />
              <span v-if="!editMode">{{scope.row.videoNum}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="readNum"
            label="播放数"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="0" :controls="false" v-if="editMode" v-model="scope.row.readNum" />
              <span v-if="!editMode">{{scope.row.readNum}}</span>
            </template>
          </el-table-column>
                    <el-table-column
            prop="showNum"
            label="展示次数"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="0" :controls="false" v-if="editMode" v-model="scope.row.showNum" />
              <span v-if="!editMode">{{scope.row.showNum}}</span>
            </template>
          </el-table-column>
                    <el-table-column
            prop="viewNum"
            label="唯一身份观看人数"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="0" :controls="false" v-if="editMode" v-model="scope.row.viewNum" />
              <span v-if="!editMode">{{scope.row.viewNum}}</span>
            </template>
          </el-table-column>
                    <el-table-column
            prop="averageTime"
            label="平均观看时长(s)"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="0" :controls="false" v-if="editMode" v-model="scope.row.averageTime" />
              <span v-if="!editMode">{{scope.row.averageTime}}</span>
            </template>
          </el-table-column>
                    <el-table-column
            prop="newComments"
            label="新增评论数"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="0" :controls="false" v-if="editMode" v-model="scope.row.newComments" />
              <span v-if="!editMode">{{scope.row.newComments}}</span>
            </template>
          </el-table-column>
                    <el-table-column
            prop="newFans"
            label="新增订阅数"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="0" :controls="false" v-if="editMode" v-model="scope.row.newFans" />
              <span v-if="!editMode">{{scope.row.newFans}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="cost"
            label="花费$"
            min-width="80">
            <template slot-scope="scope">
              <el-input-number size="mini" class="edit-cell" :precision="2" :controls="false" v-if="editMode" v-model="scope.row.cost" />
              <span v-if="!editMode">{{scope.row.cost}}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div style="clear: both;height:15px;width: 100%;"></div>
    </div>
    </div>
  </div>
</template>

<script>
  import DatePhase from  '@/components/sale/date-phase'
  import dingMixin from  '@/mixins/ding'
  import salePoMixin from  '@/mixins/sale-po'
  import {dateUtil} from '@/utils/dateUtil'
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

  export default {
    data () {
      return {
        datePhase:{
            dateType: 2,
            value:'',
            to:''
        },
        editMode: false,
        dataListLoading: false,
        saveLoading:false,
        reportItems:[]
      }
    },
    mixins: [dingMixin, salePoMixin],
    components: {
      DatePhase
    },
    activated () {
      //this.getDataList()
    },
    created(){

    },
    methods: {
      exportExcel(){
        this.$nextTick(function () {
          let wb = XLSX.utils.table_to_book(document.getElementById('sale-table'));
          let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
          try {
            FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sm.xlsx')
          } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
          }
          return wbout;
        });
      },
      save(){
        this.saveLoading = true;
        let res = this.checkInputData()
        this.$http({
          url: this.$http.adornUrl('/sale/po/saveSmData'),
          method: 'post',
          data: this.$http.adornData(res,false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.getReport()
          } else {
            this.$message({message: data.msg, type: 'error', duration: 3000})
          }
        }).finally(()=>{
          this.saveLoading = false
          this.editMode=false
        })
      },
      checkInputData(){
        let res = this.reportItems[0].value.filter(x=>x.datePhase>'')
        for(let item of this.reportItems[0].value){
/*          item.dateType = this.datePhase.dateType
          item.datePhase = this.datePhase.value*/
        }
        return res
      },
      edit(){
        this.editMode=true;
      },
      getCanEdit(){
        if(!(this.isPoTeam || this.isSaleLeader || this.isPlatUser(3001, this.userInfo.dingId))){
          return false
        }
        if(this.reportItems.length==1){
          if(dateUtil.nDayExpire(30, this.reportItems[0].createAt) && !this.isSaleLeader) {
            return false;
          }

          return this.reportItems[0].dateType==2 || this.reportItems[0].dateType==3
        }
        return false
      },
      getSmData(ls){
        return ls.filter(x=>x.platType==="sm");
      },
      getVideoData(ls){
        return ls.filter(x=>x.platType==="video");
      },
      getFeedsData(ls){
        return ls.filter(x=>x.platType==="feeds");
      },
      // 获取数据列表
      getReport () {
        if(this.datePhase.value == null || this.datePhase.value == ''){
          this.$message({message: '请选择时间', type: 'error', duration: 3000})
          return
        }
        this.editMode = false
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sale/po/listSmData'),
          method: 'get',
          params: this.$http.adornParams({
            'datePhase': this.datePhase.value,
            'dateType': this.datePhase.dateType,
            'to': this.datePhase.to
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.reportItems = data.data
          } else {
            this.reportItems = []
          }
        }).finally(()=>{
          this.dataListLoading = false
        })
      }
    }
  }
</script>
<style lang="scss">

  .el-table{
    font-size: 12px;
  }

  .edit-cell{
    width: 60px;
  }

  .el-input-number.is-without-controls .el-input__inner{
    padding: 0;
    text-align: left;
  }

</style>
